import 'package:auto_route/annotations.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:sonora/bloc/base/sj_base_bloc.dart';
import 'package:sonora/bloc/mine/sj_mine_bloc.dart';
import 'package:sonora/bloc/mine/sj_mine_event.dart';
import 'package:sonora/bloc/mine/sj_mine_state.dart';
import 'package:sonora/config/sj_app_initial.dart';
import 'package:sonora/shared/lib/constants/sj_colors.dart';
import 'package:sonora/utils/sj_log_utils.dart';
import 'package:sonora/utils/sj_text_style.dart';
import 'package:sonora/views/appbar/sj_appbar.dart';
import 'package:sonora/views/navigation/routes/sj_app_router.dart';

@RoutePage()
class SjCoinShopPage extends StatefulWidget {
  late SjMineBloc bloc = getit<SjMineBloc>();

  SjCoinShopPage({super.key});
  @override
  State<SjCoinShopPage> createState() => _SjCoinShopPageState(bloc);
}

class _SjCoinShopPageState extends State<SjCoinShopPage> {
  final SjMineBloc mineBloc;

  _SjCoinShopPageState(this.mineBloc);

  @override
  void initState() {
    super.initState();
    mineBloc
      ..add(const SjMineEventLoadedUserInfo())
      ..add(const SjMineEventLoadedGoodSearchList());
    SjLogPvManger.stat(page: SjLogPages.sjActionNamePurchase);
  }

  @override
  Widget build(BuildContext context) {
    return BlocProvider<SjMineBloc>.value(
      value: mineBloc,
      child: Scaffold(
        extendBodyBehindAppBar: true, // 使内容延伸到导航
        appBar: SjAppbar(
          title: const Text(
            'Coin Shop',
            style: SjTextStyle.customFontBlack20,
          ),
          backgroundColor: Colors.transparent, // 设置导航栏背景为透明
          elevation: 0, // 去除导航栏阴影
          leading: IconButton(
            icon: Image.asset('assets/images/nav_back.png'), // 左侧按钮
            onPressed: () {
              // 处理返回逻辑
              Navigator.pop(context, true);
            },
          ),
        ),
        body: BlocListener<SjMineBloc, SjMineState>(
          listener: (context, state) {
          },
          child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/post_bg.png'),
                  fit: BoxFit.cover,
                ),
              ),
              child: SafeArea(
                child: Column(children: [
                    Stack(
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Image.asset('assets/images/coins_icon.png'),
                          ],
                        ),
                        Positioned(
                          right: 0,
                          top: 30,
                          width: 200,
                          child: Column(children: [
                            const Text(
                              'My Cions',
                              style: SjTextStyle.customFontBlack14,
                            ),
                            BlocBuilder<SjMineBloc, SjMineState>(
                                builder: (context, state) {
                              return Text(
                                '${state.userInfoData?.availableCoins ?? 0}',
                                style: SjTextStyle.customFontBlack32,
                              );
                            })
                          ]),
                        )
                      ],
                    ),
                    Expanded(
                        // child:Image.asset('assets/images/block_list_empty.png')
                        child: BlocBuilder<SjMineBloc, SjMineState>(
                            builder: (context, state) {
                      int count = 0;
                      if (state.goodSearch != null) {
                        count = state.goodSearch!.length;
                      }
                      return MasonryGridView.count(
                        padding: const EdgeInsets.only(top: 20),
                        crossAxisCount: 2, // 设置列数
                        mainAxisSpacing: 16,
                        crossAxisSpacing: 20,
                        itemCount: count,
                        itemBuilder: (context, index) {
                          final coinData = state.goodSearch?.elementAt(index);
                          return InkWell(
                              onTap: () {
                                context.read<SjMineBloc>().add(
                                    SjMineEvent.initialPurchase(
                                        goodCode: coinData.code ?? ''));
                              SjLogPvManger.stat(page: SjLogPages.sjActionNameCreateorder);
                              },
                              child: Stack(
                                children: [
                                  Container(
                                    width: double.infinity,
                                    height: 148,
                                    margin: const EdgeInsets.only(right: 8),
                                    decoration: BoxDecoration(
                                        color: SjColors.themeCColor,
                                        borderRadius:
                                            BorderRadius.circular(12)),
                                    child: Column(
                                      children: [
                                        const SizedBox(
                                          height: 12,
                                        ),
                                        Image.asset(
                                            'assets/images/deal_img_icon.png'),
                                        const SizedBox(
                                          height: 12,
                                        ),
                                        Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          children: [
                                            Text(
                                              '${coinData?.exchangeCoin}',
                                              style:
                                                  SjTextStyle.customFontBlack20,
                                            ),
                                            (coinData!.discount != null &&
                                                    coinData.discount! > 0)
                                                ? SizedBox(width: 10)
                                                : Container(),
                                            (coinData!.discount != null &&
                                                    coinData.discount! > 0)
                                                ? Text(
                                                    '↓ ${coinData.discount! * 100}%',
                                                    style: const TextStyle(
                                                        fontSize: 9,
                                                        color:
                                                            Color(0xFFEBFF00)))
                                                : Container(),
                                          ],
                                        ),
                                        Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          children: [
                                            Text(
                                              '\$${(coinData!.discount != null && coinData.discount! > 0) ? coinData.price : coinData.originalPrice}',
                                              style:
                                                  SjTextStyle.customFontBlack14,
                                            ),
                                            (coinData!.discount != null &&
                                                    coinData.discount! > 0)
                                                ? const SizedBox(width: 10)
                                                : Container(),
                                            (coinData!.discount != null &&
                                                    coinData.discount! > 0)
                                                ? Text(
                                                    '\$${coinData.originalPrice}',
                                                    style: SjTextStyle
                                                        .customFontGray12)
                                                : Container()
                                          ],
                                        )
                                      ],
                                    ),
                                  ),
                                  Positioned(
                                    top: 5,
                                    right: 0,
                                    child: Image.asset(
                                        'assets/images/deal_flag_icon.png'),
                                  )
                                ],
                              ));
                        },
                      );
                    }))
                  ]),
              )),
        ))
    );}
}
